<!--
 * @Author: your name
 * @Date: 2022-03-09 18:22:22
 * @LastEditTime: 2022-04-27 01:42:03
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue-admin-template\src\views\adminList\index.vue
-->
<template>
  <div>
    <el-button type="primary"
               size='mini'
               @click="toAdd">新增</el-button>

    <div class="table">
      <el-table v-loading='loading'
                :data="tableData"
                size='mini'
                border
                style="width: 100%">
        <el-table-column width="80px"
                         type="index"
                         :index='1'
                         label="排序号">
        </el-table-column>
        <el-table-column prop="realname"
                         label="姓名">
        </el-table-column>
        <el-table-column prop="username"
                         label="用户名">
        </el-table-column>
        <el-table-column prop="password"
                         label="密码">
        </el-table-column>
        <el-table-column label="角色">
          <template slot-scope="scope">
            <el-tag type='success'>{{scope.row.role ?  scope.row.role.name: '无' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.is_active? 'success': 'danger'">{{scope.row.is_active ? '启用' : '禁用'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="100">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       @click="toEdit(scope.row)">编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button style="color:red"
                       type="text"
                       size="small"
                       @click="toDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-div">
        <el-pagination size="mini"
                       :current-page="params.page"
                       :page-sizes="[2,5,10, 15, 20]"
                       :page-size="params.pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" />
      </div>
    </div>

    <div>
      <el-dialog :title="title"
                 :visible.sync="visible"
                 @close="toClose">
        <el-form ref="ruleForm"
                 :model="form"
                 :rules="rules">
          <el-form-item prop="realname"
                        label="姓名"
                        :label-width="formLabelWidth">
            <el-input v-model="form.realname"
                      autocomplete="off" />
          </el-form-item>
          <el-form-item prop="username"
                        label="用户名"
                        :label-width="formLabelWidth">
            <el-input v-model="form.username"
                      autocomplete="off" />
          </el-form-item>
          <el-form-item prop="password"
                        label="密码"
                        :label-width="formLabelWidth">
            <el-input v-model="form.password"
                      autocomplete="off" />
          </el-form-item>
          <el-form-item v-if="title === '修改用户信息'"
                        prop="is_active"
                        label="状态"
                        :label-width="formLabelWidth">
            <el-switch v-model="form.is_active"
                       active-color="#13ce66"
                       inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
          <el-form-item prop="role_id"
                        label="角色"
                        :label-width="formLabelWidth">
            <el-radio-group v-model="form.role_id">
              <el-radio v-for="item in roles"
                        :key="item.id"
                        :label="item.id">{{ item.name }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="visible=false">取 消</el-button>
          <el-button type="primary"
                     @click="toSave">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getFindAdminAll, createAdmin, deleteById, updateAdmin } from '@/api/user';
import { getFindRole } from '@/api/role';
export default {
  data() {
    return {
      tableData: [],
      loading: false,
      title: '',
      visible: false,
      formLabelWidth: '80px',
      form: {},
      rules: {
        realname: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }],
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }],
        roleId: [{
          required: true,
          message: '请选择角色权限',
          trigger: 'blur'
        }],
      },
      params: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      roles: [],
    };
  },
  created() {
    this.getAllAdminData();
    this.getAllRole()
  },
  watch: {
    params: {
      handler() {
        this.getAllAdminData()
      },
      deep: true
    }
  },
  methods: {
    async getAllAdminData() {
      this.loading = true;
      const res = await getFindAdminAll({ ...this.params });
      this.tableData = res.list;
      this.total = res.total
      this.loading = false;
    },
    async getAllRole() {
      const res = await getFindRole();
      this.roles = res.data;
    },
    /**
     * @description: 分页每页条数发生变化的回调
     * @param {*} val  当前条数值
     * @return {*}
     */
    handleSizeChange(val) {
      this.params.pageSize = val
      this.params.page = 1
    },
    /**
     * @description: 页码发生变化的回调
     * @param {*} val  当前条数值
     * @return {*}
     */
    handleCurrentChange(val) {
      this.params.page = val
    },
    toClose() {
      this.$refs.ruleForm.resetFields()
    },
    toAdd() {
      this.form = {}
      this.title = '添加用户信息'
      this.visible = true
    },
    toSave() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let res;
          if (this.title === '添加用户信息') {
            res = await createAdmin(this.form)
          }
          if (this.title === '修改用户信息') {
            res = await updateAdmin(this.form)
          }
          this.$notify.success({
            title: '成功',
            message: res.message
          })
          this.getAllAdminData()
          this.visible = false
        } else {
          return false
        }
      })
    },
    toEdit(row) {
      this.form = { ...row }
      this.title = '修改用户信息'
      this.visible = true
    },
    toDelete(id) {
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteById({ id })
        this.$message({ type: 'success', message: res.message })
        this.getAllAdminData()
      })
    },
  }
};
</script>

<style scoped lang="less">
</style>
